Indigo Blogger Template

The Main Features Of Indigo


Edit Top Menu:

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code:

<div class='top-nav col-6'>
						<ul class='top-menu fr' id='menu-top-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Privacy</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='/p/blog-page.html'>Sample Page</a></li>
</ul>					</div><!-- .top-nav -->

Now change all of the links with your own.

Top Social Icons

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code: <!-- .branding -->

<div class='header-content fr'>
      <div class='header-socials fl'>
        <div class='header-socials-wrap'>
          <a class='header-social-facebook' href='#'><i class='fa fa-facebook'/></a>
			<a class='header-social-twitter' href='#'><i class='fa fa-twitter'/></a>
			  <a class='header-social-google-plus' href='#'><i class='fa fa-google-plus'/></a>
        </div>
      </div>
      <div class='header-search fr'>
        <form action='/search' method='get'>
          <input class='header-search-input' name='q' placeholder='Search…' type='text' value=''/>
			<i class='fa fa-search'/>
        </form>
      </div>
    </div>

Now change all of the links with your own.

Navigation

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code: 
 <div class='mobile-nav cf'>
					<ul class='site-menu' id='menu-main-menu-1'>
			<li class='active'><a href='/'>Home</a></li>
			<li><a href='#'>Layouts</a><ul class='sub-menu'>
	<li><a href=''>Hybrid</a></li>
	<li><a href=''>Classic</a></li>
	<li><a href=''>Grid</a></li>
	<li><a href=''>Masonry</a></li>
	<li><a href=''>Fullwidth Grid</a></li>
	<li><a href=''>Fullwidth Masonry</a></li>
	<li><a href=''>Widgetized Layout</a></li>
			</ul></li>
			<li><a href='#'>Categories</a></li>
			<li><a href='/p/blog-page.html'>Pages</a></li>
			<li><a href='#'>Contact</a></li>
			<li><a href='#'>Purchase Theme</a></li>
			</ul>

					</div>
Now change all of the links with your own.

SOCIAL ICONS

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code: <!-- Social Icons -->

<div class='social-links-widget cf'>
<a class='social-links-behance' href='#' target='_blank'><i class='fa fa-behance'/></a>
<a class='social-links-dribbble' href='#' target='_blank'><i class='fa fa-dribbble'/></a>
<a class='social-links-facebook' href='#' target='_blank'><i class='fa fa-facebook'/></a>
<a class='social-links-github' href='#' target='_blank'><i class='fa fa-github'/></a>
<a class='social-links-gplus' href='#' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='social-links-instagram' href='#' target='_blank'><i class='fa fa-instagram'/></a>
<a class='social-links-linkedin' href='#' target='_blank'><i class='fa fa-linkedin'/></a>
<a class='social-links-pinterest' href='#' target='_blank'><i class='fa fa-pinterest'/></a>
<a class='social-links-twitter' href='#' target='_blank'><i class='fa fa-twitter'/></a>
<a class='social-links-youtube' href='#' target='_blank'><i class='fa fa-youtube-play'/></a>
</div>

Now change all of the links with your own.


Recent Comments Widget

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code: Recent Comments Settings

    <script type='text/javascript'>
//<![CDATA[  
Recent Comments Settings    
var numComments  = 5, 
var showAvatar  = true, 
var avatarSize  = 1600, 
var characters  = 150, 
var showMorelink = true, 
var moreLinktext = "More &#65533;", 
var defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", 
var hideCredits = true;

//]]></script>

Now change "numComments" Number.


Add Buttons

1. In the Post section, click on edit post or create a new post
2. Click on HTML
3. A code is written above use that code to display that Button link 

<a class="btn" href="Your Link" target="_blank">Your Text Here</a></div>
4. Save your Post and check.
Copyright © 2014. Templateclue